<template>
  <view
    class="components-refund-progress"
    :class="{show: showRefundProgress}"
  >
    <view
      v-if="showRefundProgress"
      class="refund-progress-pop-mask"
      @tap="showRefundProgress=false"
    />
    <view
      class="close"
      @tap="showRefundProgress=false"
    >
      <image src="/static/images/close.png" />
    </view>
    <view class="refund-progress-pop-neirou">
      <view class="progress-con">
        <view
          v-if="closingSts"
          class="item"
        >
          <text class="flag end" />
          <view class="big">
            交易结束
          </view>
          <view class="text">
            {{ closingSts }}
          </view>
          <view
            v-if="refundDetail.platformMessage"
            class="text form-item"
          >
            <text class="label">
              平台留言：
            </text>
            <text class="content">
              {{ refundDetail.platformMessage }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.interventionFinishTime }}
          </view>
        </view>
        <!-- 用户撤销平台介入申请 -->
        <view
          v-if="refundDetail.applyInterventionTime&&platInterSts===platInterStsConstant.NONE"
          class="item"
        >
          <text class="flag">
            买
          </text>
          <view class="big">
            用户撤销平台介入申请
          </view>
          <view class="time">
            {{ refundDetail.interventionFinishTime }}
          </view>
        </view>
        <!-- 平台介入中 -->
        <view
          v-for="(intervenItem,intervenInx) in refundInterList"
          :key="intervenInx"
          class="item"
        >
          <text class="flag">
            <!-- 0.普通用户 1.商家端 2.平台端  -->
            {{ ['买','商','平'][intervenItem.sysType] }}
          </text>
          <view class="big">
            平台介入中
          </view>
          <view class="text">
            补充凭证
          </view>
          <view
            v-if="intervenItem.voucherDesc"
            class="text form-item"
          >
            <text class="label">
              凭证说明：
            </text>
            <text class="content">
              {{ intervenItem.voucherDesc }}
            </text>
          </view>
          <view
            v-if="intervenItem.imgList.length"
            class="img-box"
          >
            <view
              v-for="(interImg, interInx) in intervenItem.imgList"
              :key="interInx"
              class="img"
              @tap="onPreviewImage(interInx, intervenItem.imgList)"
            >
              <img-show :src="interImg" />
            </view>
          </view>
          <view class="time">
            {{ intervenItem.createTime }}
          </view>
        </view>
        <!-- 用户申请平台介入 -->
        <view
          v-if="refundDetail.applyInterventionTime"
          class="item"
        >
          <text class="flag">
            买
          </text>
          <view class="big">
            申请平台介入
          </view>
          <view
            v-if="refundDetail.applyInterventionReason"
            class="text form-item"
          >
            <text class="label">
              申请理由：
            </text>
            <text class="content">
              {{ refundDetail.applyInterventionReason }}
            </text>
          </view>
          <view
            v-if="applyInterventionImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, applyInterInx) in applyInterventionImgs"
              :key="applyInterInx"
              class="img"
              @tap="onPreviewImage(applyInterInx, applyInterventionImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.applyInterventionTime }}
          </view>
        </view>
        <!-- 退款关闭 -->
        <view
          v-if="(refundDetail.returnMoneySts===returnMoneyStsConstant.FAIL || platInterSts!==platInterStsConstant.NONE) && refundCloseDesc"
          class="item"
        >
          <view class="big">
            退款关闭
          </view>
          <view class="text">
            {{ refundCloseDesc.txt }}
          </view>
          <view
            v-if="refundDetail.rejectMessage"
            class="text form-item"
          >
            <text class="label">
              拒绝理由：
            </text>
            <text class="content">
              {{ refundDetail.rejectMessage }}
            </text>
          </view>
          <view
            v-if="refundDetail.sellerMsg && !refundDetail.refundDelivery?.refundDeliveryId"
            class="text form-item"
          >
            <text class="label">
              商家备注：
            </text>
            <text class="content">
              {{ refundDetail.sellerMsg }}
            </text>
          </view>
          <view
            v-if="rejectImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, rejectInx) in rejectImgs"
              :key="rejectInx"
              class="img"
              @tap="onPreviewImage(rejectInx,rejectImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundCloseDesc.time }}
          </view>
        </view>
        <view
          v-if="refundDetail.refundTime && !refundDetail.rejectTime"
          class="item"
        >
          <text class="flag end" />
          <view class="big">
            退款成功
          </view>
          <view class="text">
            商家已退款
          </view>
          <view class="time">
            {{ refundDetail.refundTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.receiveTime"
          class="item"
        >
          <view class="big">
            商家收货
          </view>
          <view class="text">
            商家已收货，等待商家同意退款
          </view>
          <view class="time">
            {{ refundDetail.receiveTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.shipTime"
          class="item"
        >
          <view class="big">
            买家退货
          </view>
          <view class="text">
            买家发货，等待商家收货
          </view>
          <view
            v-if="deliveryImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, deliveryImgIndex) in deliveryImgs"
              :key="deliveryImgIndex"
              class="img"
              @tap="onPreviewImage(deliveryImgIndex, deliveryImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.shipTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND && refundDetail.handelTime && !refundDetail.rejectTime"
          class="item"
        >
          <view class="big">
            商家同意
          </view>
          <view class="text">
            商家已处理, 等待商家退款
          </view>
          <view
            v-if="refundDetail.sellerMsg"
            class="text form-item"
          >
            <text class="label">
              商家备注：
            </text>
            <text class="content">
              {{ refundDetail.sellerMsg }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.handelTime }}
          </view>
        </view>
        <!-- 商家已处理, 等待买家发货 -->
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.handelTime && (!refundDetail.rejectTime || refundDetail.refundDelivery?.refundDeliveryId)"
          class="item"
        >
          <view class="big">
            商家同意
          </view>
          <view class="text">
            商家已处理, 等待买家发货
          </view>
          <view
            v-if="refundDetail.sellerMsg"
            class="text form-item"
          >
            <text class="label">
              商家备注：
            </text>
            <text class="content">
              {{ refundDetail.sellerMsg }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.handelTime }}
          </view>
        </view>

        <view class="item">
          <view class="big">
            买家提交仅退款/退款退货申请, 等待商家处理
          </view>
          <view
            v-if="buyerReason"
            class="text form-item"
          >
            <text class="label">
              退款原因：
            </text>
            <text class="content">
              {{ buyerReason }}
            </text>
          </view>
          <view
            v-if="refundDetail.buyerDesc"
            class="text form-item"
          >
            <text class="label">
              退款说明：
            </text>
            <text class="content">
              {{ refundDetail.buyerDesc }}
            </text>
          </view>
          <view
            v-if="applyRefundImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, imgIndex) in applyRefundImgs"
              :key="imgIndex"
              class="img"
              @tap="onPreviewImage(imgIndex,applyRefundImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.applyTime }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ReturnMoneySts, RefundApplyType, PlatInterveneSts } from '@/utils/constant'
import { computed } from 'vue'
const returnMoneyStsConstant = ReturnMoneySts
const applyTypeConstant = RefundApplyType
const platInterStsConstant = PlatInterveneSts

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  refundDetail: {
    type: Object,
    default: () => ({})
  }
})

onUnmounted(() => {
  if (isShowPreview) {
    uni.closePreviewImage({
      success: () => {
        isShowPreview = false
      }
    })
  }
})

const showRefundProgress = computed({
  get () {
    return props.modelValue
  },
  set () {
    emits('update:modelValue', false)
  }
})

// 退款原因
const buyerReason = computed(() => {
  return [
    '拍错/多拍/不喜欢',
    '协商一致退款',
    '商品破损/少件',
    '商品与描述不符',
    '卖家发错货',
    '质量问题',
    '其他'][props.refundDetail.buyerReason]
})

// 退款关闭说明
const refundCloseDesc = computed(() => {
  const info = props.refundDetail
  if (info.cancelTime) {
    return {
      txt: '买家已撤销退款申请',
      time: info.cancelTime
    }
  }
  if (info.rejectTime) {
    return {
      txt: '商家已拒绝退款申请',
      time: info.rejectTime
    }
  }
  if (info.handelTime && !info.rejectTime) {
    return {
      txt: '买家已撤销（或超时）',
      time: info.handelTime
    }
  }
  return null
})

const platInterSts = computed(() => props.refundDetail.platformInterventionStatus)
// 平台介入状态 -1.没有介入 1.用户申请介入 2.平台同意介入 3.平台拒绝介入 5.平台同意退款成功 6.用户撤销
// 交易结束状态
const closingSts = computed(() => {
  switch (platInterSts.value) {
    case platInterStsConstant.REJECT:
      return '平台拒绝退款'
    case platInterStsConstant.REFUND_SUCCEED:
      return '平台同意退款成功'
    default:
      return ''
  }
})

// 平台介入中补充凭证列表
const refundInterList = computed(() => {
  const list = props.refundDetail.orderRefundInterventionList || []
  return list.reverse().map(item => {
    item.imgList = onHandleImgs(item.imgUrls)
    return item
  })
})

const deliveryImgs = computed(() => {
  return onHandleImgs(props.refundDetail.refundDelivery?.imgs)
})

// 用户申请退款凭证
const applyRefundImgs = computed(() => {
  return onHandleImgs(props.refundDetail.photoFiles)
})

// 申请平台介入凭证
const applyInterventionImgs = computed(() => {
  return onHandleImgs(props.refundDetail.applyInterventionImgUrls)
})

// 拒绝凭证
const rejectImgs = computed(() => {
  return onHandleImgs(props.refundDetail.shopImgUrls)
})

// 图片处理
const onHandleImgs = (imgStr) => {
  if (imgStr) {
    return imgStr.split(',').map(url => {
      return util.checkFileUrl(url)
    })
  }
  return []
}

let isShowPreview = false
/**
 * 查看图片
 */
const onPreviewImage = (current, urls) => {
  uni.previewImage({
    current,
    urls,
    success: () => {
      isShowPreview = true
    }
  })
}
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
